<script>
import gsap from 'gsap';

export default {
    name: "GSAP",
    props: {
        toggle: Boolean,
        itemStyle: Object,
        config: {
            type: Array,
            require: true,
            default: () => {
                return [
                    {
                        x: -50,
                        scale: 0.45,
                    },
                    {
                        x: 50,
                        scale: 1,
                    }
                ]
            }
        },
    },
    watch: {
        toggle: {
            handler(val) {
                this.$nextTick(() => {
                    if (val) {
                        gsap.to(this.$refs.a, this.config[0])
                        gsap.to(this.$refs.b, this.config[1])
                    } else {
                        gsap.to(this.$refs.b, this.config[0])
                        gsap.to(this.$refs.a, this.config[1])
                    }
                })
            },
            immediate: true
        }
    },
}
</script>

<template>
    <div class="box">
        <div class="item" ref="a" :style="itemStyle">
            a
        </div>
        <div class="item" ref="b" :style="itemStyle">
            b
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
    //border: 1px solid skyblue;
    //border-radius: 6px;
    position: relative;
    width: 100%;
    height: 100%;

    .item {
        position: absolute;
        transform-origin: left bottom;
        width: 90%;
        height: 50%;
        background: #ffffff;
        border-radius: 6px;
        scale: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>